<template>
    <div class="outer font-song" :style="{
        height,
        width,
    }">
        <!-- 第一种样式，全部为图片 -->
        <div class="image-outer" v-if="content && content.type === 'image'">
            <van-image lazy-load="true" height="100%" width="100%" :src="content.image" />
        </div>
        <!-- 第二种样式，可编辑模式 -->
        <image class="background" :src="content.image" v-if="content && content.type === 'card'"></image>
        <div class="card-outer" v-if="content && content.type === 'card'">
            <div class="header row" @click="click('time')">
                <div class="time row">
                    <div class="date">{{ date.date }}</div>
                    <span class="split">|</span>
                    <div class="month">{{ date.months + 1 }}</div>
                    <span class="split">|</span>
                    <div class="year">{{ date.years }}</div>
                </div>

                <image class="logo" src="@/static/logo.png"></image>
                <image class="qrcode"
                    src="cloud://xinyuqian-5gvjlw4d0eabb09e.7869-xinyuqian-5gvjlw4d0eabb09e-1307420821/static/qrcode.svg">
                </image>
            </div>
            <div class="main row">
                <div class="title" @click="click('title')">
                    <div v-for="(row, index) in Title" :key="index" class="row">
                        <span v-for="(word, index1) in row" :key="index1">{{
                                word
                        }}</span>
                    </div>
                </div>
                <div class="description">点击查看</div>
            </div>
            <van-image class="picture flex-1" height="100%" width="100%" :src="content.image" fit="cover"
                @click="click('image')" v-if="content.image">
            </van-image>

            <div class="please" @click="click('please')">
                {{ content.please || "" }}
            </div>
        </div>
    </div>
</template>

<script>
import { calendar } from "@/lib/calendar.js";
import vanImage from "@/wxcomponents/weapp/dist/image/index";
import dayjs from "@/lib/day.js";
import { chineseDate } from "@/lib/day.js";

/**
 *content: {
    date: new Date(),
    title: "标题",
    description: 文本描述`,
    please: "/ 愿你天天开心，没有烦恼/",
    image: "https://unsplash.it/1600/900?random",
  },
 *
 */
export default {
    props: ["content", "height", "width"],
    name: "card",
    components: { vanImage },

    mounted() { },
    methods: {
        eventGetImage() { },
        click(tagname) {
            // tagname: time|title|description|image|please
            this.$emit("click", tagname);
        },
    },
    computed: {
        Title() {
            if (this.content && this.content.title) {
                const result = this.content.title
                    .split("\n")
                    .map((i) => i.split(""));

                return result;
            } else {
                return [];
            }
        },
        date() {
            if (!this.content) return {};
            let Time = new Date(this.content.date);
            if (isNaN(Time.getTime())) Time = new Date();
            const time = dayjs(Time);
            const date = time.toObject();
            const { IDayCn, IMonthCn } = calendar.solar2lunar(
                date.years,
                date.months + 1,
                date.date
            );
            return {
                ...date,
                nongli: IMonthCn + IDayCn,
                weekday: chineseDate.weekdaysShort[time.weekday()],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.outer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
}

.card-outer {
    position: relative;
    width: 90%;
    height: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.image-outer {
    height: 100%;
    width: 100%;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    filter: blur(2px);
}

.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;

    font-size: 3rpx;

    .time {
        align-items: baseline;
    }

    .day {
        font-weight: lighter;
        font-size: 8%;
        text-align: right;
    }

    .date {
        font-size: 26rpx;
    }

    .split {
        transform: rotate(36deg);
    }

    .logo {
        transform: translateY(30%);
        height: 35rpx;
        width: 35rpx;
    }

    .qrcode {
        height: 25rpx;
        width: 25rpx;
    }
}

.main {
    justify-content: space-evenly !important;
    align-items: center;
    height: 100rpx;
    font-weight: bolder;

    .title {
        height: 60%;
        font-size: 30%;
        font-size: bold;
        writing-mode: vertical-lr;
        word-wrap: break-word;
        white-space: pre-wrap;

        .row {
            justify-content: space-evenly;
        }
    }

    .description {
        font-size: 10rpx;
        line-height: 12%;
        white-space: pre-wrap;
    }
}

.flex-1 {
    flex: 1;
}

.please {
    font-weight: bold;

    text-align: center;
    font-size: 5rpx;
    height: 10%;
}

.picture {
    width: 90%;
    height: 150rpx;
    margin: 0 auto;
    border-radius: 4%;
    background-image: linear-gradient(45deg, #feb692, #ea5455);
    color: #fff;
    overflow: hidden;
}

.material-icons-outlined {
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-2 {
    font-size: 7%;
}
</style>
